<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>mvvm模型数据代理</title>
</head>

<body>
    <!-- 
        MVVM模型
            1.M: 模型(Model):data中的数据
            2.V: 视图(View) :模板代码
            3.VM: 视图模型(ViewModel):Vue实例
        观察发现:
            1.data中所有的属性,最后都出现在了vm身上
            2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
     -->
    <div id="root">
        <h2>这里是:{{ province.toUpperCase() }}省</h2><br>
        <h2>这里是:{{ city }}市</h2><br>
        <h2>这里是:{{ district }}区</h2><br>
        <h2>{{Date.now()}}</h2>
        <h2>测试:{{$options}}</h2>
    </div>

    <script>
        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#root',
            data: {
                province: 'guangdong',
                city: '深圳',
                district: '南山区'
            }
        })
        console.log(vm)

        // es6中defineProperty方法
        let num = 18
        let person = {
            name: 'wuzhenhao',
            sex: '男',
            // age: 18
        }

        Object.defineProperty(person,'age',{
            // value:18,           //不可枚举
            // enumerable:true,    //控制属性是否可以枚举
            // writable:true,     //控制属性是否可以修改
            // configurable:true, //控制属性是否可以删除

            get() {
                console.log('有人读取age属性')
                return num
            },

            set(value){
                console.log('有人修改了age属性,且值是'+value)
                num=value
            },
        })
        console.log(Object.keys(person)) //验证枚举
        console.log(person)


    </script>
</body>

</html>